<template>
  <div>
    <el-container style="width: 100vw; height: 100vh; border: 1px solid #eee; overflow-x: hidden">

      <!-- 左边侧边栏开始 -->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246);overflow-x:inherit">
        <el-menu>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-document"></i>疫情科普</template>
            <router-link to="/home/CovidInfo">
              <el-menu-item index="1-1">
                COVID-19
              </el-menu-item>
            </router-link>
            <router-link to="/home/Vaccines">
              <el-menu-item index="1-2">
                疫苗
              </el-menu-item>
            </router-link>

          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-view"></i>国内疫情</template>
            <router-link to="/home/ChinaMap">
              <el-menu-item index="2-1">
                疫情地图
              </el-menu-item>
            </router-link>
            <router-link to="/home/ChinaGraph">
              <el-menu-item index="2-2">
                疫情统计图
              </el-menu-item>
            </router-link>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-picture-outline-round"></i>全球疫情</template>
            <router-link to="/home/EarthMap">
              <el-menu-item index="3-1">疫情地图</el-menu-item>
            </router-link>
            <router-link to="/home/Vaccination">
              <el-menu-item index="3-2">疫苗接种统计</el-menu-item>
            </router-link>

          </el-submenu>

          <el-submenu index="4">
            <template slot="title"><i class="el-icon-position"></i>实时播报</template>
            <router-link to="/home/ChinaHot">
              <el-menu-item index="4-1">
                国内疫情
              </el-menu-item>
            </router-link>
            <router-link to="/home/EarthHot">
              <el-menu-item index="4-2">
                国外疫情
              </el-menu-item>
            </router-link>

          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 左边侧边栏结束 -->

      <el-container>
        <!-- 头部导航栏开始 -->
        <el-header>
          <span class="title">新冠肺炎疫情最新动态</span>
          <el-dropdown class="setting">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span class="user">{{this.item.name}}</span>
        </el-header>
        <!-- 头部导航栏开结束 -->

        <!-- 中间主要区域开始 -->
        <el-main>
          <router-view />

        </el-main>
        <!-- 中间主要区域结束 -->
      </el-container>
    </el-container>

  </div>
</template>

<script>
import '@/assets/css/home.css'
export default {
  name: 'Home',
  data() {
    return {
      item: {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      btnFlag: false
    }
  }
}
</script>
